<template>
  <div class="top-item flex-row-center-between gap40 pd16 br4">
    <div class="pdr30 mgr30">
      <div class="flex">
        <span>发生故障总客户数</span>
      </div>
      <div class="mgt20 flex-row-center-left">
        <span class="fs20 bold mgr10 fs28">{{ props.data.finalCustomerCount }}</span>
        <span class="mgr30 grey-text">个</span>
        <span class="mgr5 grey-text">占总客户数的</span>
        <span class="bold">{{ props.data.customerRate }}</span>
      </div>
    </div>

    <div class="flex1 flex-row-center-between">
      <div>
        <div>单客户平均故障数</div>
        <div class="flex-row-center-left mgt20">
          <span class="fs20 bold mgr10 fs28">{{ props.data.avgCustomerFault }}</span>
          <span class="mgr30 grey-text">个</span>
        </div>
      </div>
      <div>
        <div>单客户最少故障数</div>
        <div class="flex-row-center-left mgt20">
          <span class="fs20 bold mgr10 fs28">{{ props.data.minFaultCount }}</span>
          <span class="mgr30 grey-text">个</span>
        </div>
      </div>
      <div>
        <div>单客户最多故障数</div>
        <div class="flex-row-center-left mgt20">
          <span class="fs20 bold mgr10 fs28">{{ props.data.maxFaultCount }}</span>
          <span class="mgr30 grey-text">个</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import type { FaultOverview } from '../config'

  const props = defineProps({
    data: {
      type: Object as PropType<FaultOverview>,
      default: () => ({})
    }
  })

  /**----------------------------methods----------------------------------------------------------------------- */
</script>

<style scoped lang="less">
  .top-item {
    background: #f6f7fb;
    .up {
      color: #d92329;
    }
    .down {
      color: #119c59;
    }
  }
</style>
